#Tailwind CSS

Tailwind Labsは収益悪化に伴いエンジニアリングチームの75%を削減したが、Google AI StudioやSupabaseなどが新たなスポンサーとして支援を表明した。

発端は llms.txt の追加提案が、ドキュメントアクセス減少による有料製品への導線弱体化を懸念して見送られたことにある。 AIによるコード生成の普及が収益減の主因とされ、この窮状が明らかになった後にGoogle AI Studioなどがスポンサー就任を発表した。 Adam Wathan氏は組織規模は縮小したものの経営は安定したとし、コミュニティからの支援に感謝を示している。

出展：GitHub PR, Tailwind CSS Sponsor, Logan Kilpatrick (LinkedIn)

Tailwind CSS 4.1.0 がリリース。

• variant の追加
  • details-content、inverted-colors、noscript、pointer-none、pointer-coarse、pointer-fine, user-invalid、user-valid など
• utility の追加
  • wrap-anywhere、wrap-break-word、wrap-noraml、 text-shadow-*、mask-*、shadow-*/<alpha>、 inset-shadow-*/<alpha>、drop-shadow-*/<alpha>、text-shadow-*/<alpha>、drop-shadow-<color>など
• @source がデフォルトで node_modules を無視するように変更
• @source not ”…”の追加
  • クラス名をスキャンする際に、特定のパスを無視することが出来る
• @source inline("")の追加
  • 特定のユーティリティをインライン化（Tailwind が生成するように強制）できる
• @source not inline("")の追加
  • 特定のクラスが検出されても、そのクラスが生成されないように強制できる

出展：https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.1.0

styled-components のコアメンテナーである quantizor 氏が、プロジェクトをメンテナンスモードに移行することを発表しました。

https://opencollective.com/styled-components/updates/thank-you

Tailwind CSS の台頭や、自身が積極的に styled-components を利用しなくなったこと、これは誤解があると思いますが React コアチームが Context API を事実上非推奨にしたことなどを理由に挙げています。

Tailwind CSS v4 がリリースされた。

https://tailwindcss.com/blog/tailwindcss-v4

多くの新機能や新たなユーティリティやバリアント、構成の変更などを含んでいる。

構成が変更されているため、そのままバージョンを上げて使うことは出来ない。 マイグレーションガイドの一読が必要。

https://tailwindcss.com/docs/upgrade-guide

以下に、一部の新機能を紹介する。

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-pikachu-100: #f4e66b;
}

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div
    popover
    id="my-popover"
    class="transition-discrete starting:open:opacity-0 ..."
  >
    <!-- ... -->
  </div>
</div>

<div class="not-hover:opacity-75">
  <!-- ... -->
</div>

Chrome 131 がリリース。

https://developer.chrome.com/blog/new-in-chrome-131

<style>
  p {
    color: deeppink;
  }

  .blue::selection {
    color: blue;
  }
</style>
<p class="blue">
  This is
  <em>emphasized</em>
  text.
</p>

<style>
  details {
    display: flex;
    overflow: hidden;
    width: min-content;
    /* ... */
    summary {
      &::marker {
        content: "";
      }
      /* ... */
    }
    ::details-content {
      transition: 0.5s ease;
      width: 0;
      height: 0;
    }
    [open]::details-content {
      width: 320px;
      height: 28em;
    }
    /* ... */
  }
</style>
<details name="accordion" open>
  <summary>🐈</summary>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
      mollitia.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
      mollitia.
    </p>
  </div>
</details>

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

2023 年 12 月 20 日に Tailwind CSS v3.4 がリリースされました。

弊社では、Tailwind CSS を利用していませんが話題性があると思ったので取り上げます。

https://tailwindcss.com/blog/tailwindcss-v3-4

Tailwind CSS v3.4 では、Dynamic viewport units（dvh、lvh、svh）のサポート、:has()のサポート、子要素にスタイルを適用する* variant のサポート、size-* utility の追加、Subgrid のサポートなどが行われました。

// Dynamic viewport units
<div class="h-dvh"></div>

// :has()
<label class="has-[:checked]:ring-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 ..">
  <svg fill="currentColor"></svg>
  Google Pay
  <input type="radio" class="accent-indigo-500 ..." />
</label>

// * variant
<ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
</ul>

// size-* utility
// <img class="h-10 w-10" ...>
<img class="size-10" .../>

// Subgrid
<div class="grid grid-cols-4 gap-4">
  <div class="grid grid-cols-subgrid gap-4 col-span-3">
      <div class="col-start-2">06</div>
  </div>
</div>

また Tailwind Labs から shadcn/ui と同様の仕組みの UI Kit である Catalyst がリリースされました。Catalyst は React Aria を利用しています。

http://tailwindcss.com/blog/introducing-catalyst

https://vercel.com/blog/announcing-v0-generative-ui

Vercel がプロンプトから UI を生成するサービス v0 をベータ公開しました。

現在は、React ベースで Shadcn と Tailwind CSS を利用したコードが生成されますが、今後は他のライブラリやフレームワークも検討しているとのころ。

料金プランが公開され、無料プランも提供されます。基本的には料金に応じて生成に利用できるクレジットが増えるだけです。

https://v0.dev/pricing